<template>
    <div id="duty_doc">
        <p class="sub-title"> {{lists.title.zh?lists.title.zh:lists.title.mn}}</p>
        <table class="sub-cont">
            <tr>
                <td class="sub-tr">{{lists.create_user.teacher_name.zh?lists.create_user.teacher_name.zh:lists.create_user.teacher_name.mn+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+lists.created_at}}</td>
            </tr>
        </table>
        <div class="contents cont-bor" v-html="lists.content.zh?lists.content.zh:lists.content.mn"></div>
        <div class="bord"></div>
        <div class="download" @click="download">
            <table class="sub-cont">
                <tr>
                    <td class="fst-td">
                        <Icon type="link"></Icon>
                    </td>
                    <td class="sec-td">附件下载</td>
                </tr>
                <tr>
                    <td></td>
                    <td class="sec-td">
                        <span>{{ lists.file_name.zh?lists.file_name.zh:lists.file_name.mn }}</span>
                        <Icon type="archive" class="ico"></Icon>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        lists:{
            type:Object,
            default:() =>{
                return {}
            }
        }
    },
    methods: {
        download() {
            if (this.lists.upload_file == false) {
                this.$Message.info('当前还没有附件上传');
                return;
            }
            this.$util.download_file(this.lists.upload_file)
        }
    },
};
</script>

<style lang='less'>
#duty_doc {
    .sub-title {
        padding: 5px 0px 15px 0px;
        font-size: 18px;
        color: #1c2438;
        font-weight: 700;
        text-align: center;
    }
    .sub-cont {
        width: 100%;
        padding: 10px 0px;
    }
    .sub-tr {
        padding: 5px 0px;
        font-size: 13px;
        color: #495060;
        text-align: right;
    }
    .contents {
        overflow: auto;
        height: auto;
        padding-top: 15px;
    }
    .cont-bor {
        border-top: 1px solid #d9d9dd;
    }
    .bord {
        width: 100%;
        height: 1px;
        margin: 20px 0;
        background-color: #d9d9dd;
        box-shadow: 0 1px #d9d9da;
    }
    .download {
        word-break: break-all;
        width: 200px;
        height: auto;
        border: 1px dashed mediumblue;
        border-radius: 1em;
    }
    .download:hover {
        color: orangered;
        border: 1px dashed orangered;
        border-radius: 1em;
        cursor: pointer;
    }
    .fst-td {
        width: 30%;
        text-align: center;
    }
    .sec-td {
        font-size: 13px;
    }
    .ico {
        margin: 0 20px;
    }
}
</style>
